/*
 * @Description: 带类型无联动滚轮组件
 * @Author: buwei.huang
 * @Date: 2019-07-15 10:45:20
 * @Last Modified by: buwei.huang
 * @Last Modified time: 2019-09-11 17:40:24
 */
<template>
  <mock-shade
    ref="shade"
    @hide="hide"
  >
    <div
      class="picke"
      :class="isPicker ? 'pickeHeight' : ''"
      @click.stop
    >
      <div class="picker_head flex-h flex-hsb flex-vc">
        <div
          class="fontsize32 baseColorNoAcitve picker_head_left picker_head_div flex-h flex-vc"
          @click="onCancle"
        >
          取消
        </div>
        <div class="picker_head_title">
          {{titleText}}
        </div>
        <div
          class="fontsize32 baseColorNoAcitve picker_head_right picker_head_div flex-h flex-vc"
          @click="onSubmit"
        >
          确定
        </div>
      </div>
      <Picker
        :slots="slots"
        valueKey="endStationName"
        @change="onValuesChange"
      />
    </div>
  </mock-shade>
</template>
<script>
// 需传入值 列如
// pickerConfig {
//  values: ['节假日及周末', '工作日', '全年'], -- 滚动数组
//  defaultIndex: 1, --默认值下标
//  textAlign: 'left' --对齐
// }
import { Picker } from 'mint-ui'
import Shade from '@/components/Shade'
export default {
  components: {
    Picker,
    'mock-shade': Shade
  },
  props: {
    // 标题
    titleText: {
      type: String,
      default: ''
    },
    // 选择器配置项
    pickerConfig: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      isPicker: false,
      dateValue: [], // 选择后的值
      slots: [],
      pickerHeight: ''
    }
  },
  watch: {
    // 监听传入的数组
    pickerConfig(val) {
      console.error(val[0])
      this.slots = val
      this.slots.map((item, index) => {
        item.flex = 1
        item.className = 'solt' + (index + 1)
      })
    }
  },
  methods: {
    onValuesChange(picker, values) {
      this.dateValue = {
        dateValueArr: picker.getValues(),
        title: this.titleText
      }
      let indexArr = []
      this.dateValue.dateValueArr.map((item, index) => {
        indexArr.push(this.pickerConfig[index].values.indexOf(item))
      })
      this.dateValue.indexArr = indexArr
      // console.log(this.dateValue)
    },
    show() {
      this.$emit('onOverflow', true)
      this.$refs.shade.show()
      // 不延迟没有动画效果
      setTimeout(() => {
        this.isPicker = true
      }, 100)
    },
    hide() {
      this.$emit('onOverflow', false)
      this.isPicker = false
      setTimeout(() => {
        this.$refs.shade.hide()
      }, 500)
    },
    // 点击确定，将值传到上层处理
    onSubmit() {
      this.$emit('getValue', this.dateValue)
      this.hide()
    },
    // 取消
    onCancle() {
      this.hide()
    }
  }
}
</script>
<style>
.picke {
  width: 100%;
  height: 0;
  background-color: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
  overflow: hidden;
  transition: all 0.5s;
}
.pickeHeight {
  height: 554px;
}
.picker_head {
  height: 112px;
}
.picker_head_div {
  line-height: 44px;
  padding: 0 32px;
  height: 100%;
}
.picker_head_left {
  color: #999999;
}
.picker_head_title {
  font-size: 18px; /* no */
  line-height: 50px;
}
.picker-item {
  font-size: 14px; /* no */
}
</style>
